<template>
    <div class="wrapper">
        <el-row :gutter="10">
            <el-col :span="24">
                <el-card>
                    <el-row type="flex" justify="end" class="rowDiv">
                        <el-button type="primary" @click="open_dialog(1)">添加计重单位</el-button>
                        <el-button type="primary" @click="open_dialog(2)">添加计量单位</el-button>
                    </el-row>
                    <div class="limitDiv">
                        <div class="limit-item" v-for="(item,index) in state.list" :key="index">
                            <div class="item-left">{{item.title}}</div>
                            <div class="item-left flex-direction">
                                <el-row v-for="(items,index) in item.item" :key="index">
                                    <span class="unit-name">{{items.name}}</span>
                                    <div type="primary" class="remove" @click="removeFun(items,index)">移除</div>
                                </el-row>
                            </div>
                            <div class="item-right">
                                <template v-if="item.arr.length>0">
                                    <div class="row_flex">
                                        <el-form
                                                :model="state.form"
                                                :rules="state.rules"
                                                ref="form"
                                        >
                                            <el-form-item prop="name_one">
                                                <el-input clearable type="number"
                                                          class="unit_style"
                                                          v-model="state.form.name_one"
                                                          placeholder="填写数字"></el-input>
                                            </el-form-item>
                                            <el-form-item label="" prop="unit_one">
                                                <el-select class="unit_style"
                                                           v-model="state.form.unit_one">
                                                    <template v-for="item in state.unitArr" :key="index">
                                                        <el-option :value="item.id" :label="item.name"></el-option>
                                                    </template>
                                                </el-select>
                                            </el-form-item>
                                            <span class="equal">&nbsp;=&nbsp;</span>
                                            <el-form-item prop="name_two">
                                                <el-input clearable type="number"
                                                          class="unit_style"
                                                          placeholder="填写数字"
                                                          v-model="state.form.name_two"
                                                ></el-input>
                                            </el-form-item>
                                            <el-form-item prop="unit_two">
                                                <el-select class="unit_style"
                                                           v-model="state.form.unit_two">
                                                    <template v-for="item in state.unitArr" :key="index">
                                                        <el-option :value="item.id" :label="item.name"></el-option>
                                                    </template>
                                                </el-select>
                                            </el-form-item>
                                            <span class="add-unit mar-left" @click="addUnitEquation">添加</span>
                                        </el-form>
                                    </div>

                                    <div class="flex-div">
                                        <div v-for="(aItem,index) in item.arr"
                                             :key="index"
                                             class="row_flex justify-content">
                                            <span class="unit-name">{{aItem.des}}</span>
                                            <span class="remove mar-left" @click="removeFun(aItem,index)">移除</span>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- 新建单位 -->
        <el-dialog
                :title="state.title"
                v-model="state.new_dialogVisible"
                center
                ref="form"
        >
        <span>
        <el-form
                :model="state.form"
                :rules="state.rules"
                ref="form"
                label-width="100px"
                class="demo-ruleForm"
        >
            <el-form-item label="单位" prop="new_unit">
              <el-input
                      type="text"
                      v-model="state.form.new_unit"
              ></el-input>
            </el-form-item>
        </el-form>
        </span>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="state.new_dialogVisible = false"
                >取 消</el-button
                >
                <el-button type="primary" @click="submit_create">确 定</el-button>
              </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import {ref, onMounted, getCurrentInstance, reactive} from "vue";
    import {useRouter} from "vue-router";
    import {ElNotification} from "element-plus";

    export default {
        name:"pro_unit_manager",
        components: {},
        setup() {
            let form = ref(null);
            let multipleTable = ref(null);
            const {ctx} = getCurrentInstance();
            let state = reactive({
                list: [],
                new_dialogVisible: false,
                title: '添加计重单位',
                add_flag: 1,//1:添加计重单位  2:添加计量单位
                unitArr: [
                    {id: 1, name: '吨'},
                    {id: 2, name: 'g'},
                    {id: 3, name: 'KG'},
                    {id: 4, name: '斤'},
                ],
                form: {
                    name_one: '',
                    unit_one: '',
                    name_two: '',
                    unit_two: '',
                    new_unit: '',
                },
                rules: {
                    name_one: [
                        {required: true, message: "请填写完整", trigger: "blur"},
                    ],
                    name_two: [
                        {required: true, message: "请填写完整", trigger: "blur"},
                    ],
                    unit_one: [
                        {required: true, message: "请填写完整", trigger: "change"},
                    ],
                    unit_two: [
                        {required: true, message: "请填写完整", trigger: "change"},
                    ],
                    new_unit: [
                        {required: true, message: "请填写单位", trigger: "blur"},
                    ],
                },
            });

            onMounted(() => {
                getOrderlist();
            });

            //新加单位
            function open_dialog(e) {
                state.form.new_unit = ''
                state.title = e == 1 ? '添加计重单位' : '添加计量单位'
                state.add_flag = e
                state.new_dialogVisible = true
            }

            //提交
            function submit_create() {
                form.value.validate((valid) => {
                    if (valid) {
                        let url = state.add_flag == 1 ? '/add_weighing' : '/add_metering'
                        let new_unit = state.form.new_unit;
                        state.new_dialogVisible = false
                        console.log(url, new_unit)
                    }
                })
            }

            //移除
            function removeFun(item, index) {
                let id = item.id;
                ElNotification.success('缺接口，被删除的id为'+id);
                getOrderlist()
            }

            //添加计重等式
            function addUnitEquation() {
                form.value.validate((valid) => {
                    if (valid) {
                        console.log(state.form)
                        getOrderlist();
                    }
                })
            }

            //获取列表
            function getOrderlist() {
                state.list = [
                    {
                        id: 1,
                        title: '计量单位（标品）',
                        item: [
                            {id: 1, name: '个'},
                            {id: 2, name: '袋'},
                            {id: 3, name: '份'},
                            {id: 4, name: '只'},
                        ],
                        arr: []
                    },
                    {
                        id: 1,
                        title: '计重单位（称重）',
                        item: [
                            {id: 1, name: '吨'},
                            {id: 2, name: 'g'},
                            {id: 3, name: 'KG'},
                            {id: 4, name: '斤'},
                        ],
                        arr: [
                            {id: 1, des: '1吨=1000kg'},
                            {id: 2, des: '1斤=500g'},
                            {id: 3, des: '2斤=1000g'},
                            {id: 4, des: '3斤=1500g'},
                            {id: 5, des: '4斤=2000g'},
                        ]
                    }
                ]
                console.log(state.list)
            }


            return {
                form,
                state,
                getOrderlist,
                addUnitEquation,
                removeFun,
                open_dialog,
                submit_create,
            };
        },
    };
</script>
<style lang="scss" scoped>
    .wrapper {
        height: 100%;

        .el-row {
            width: 100%;
            height: 100%;
            /deep/ .el-card {
                height: 100%;
                .el-card__header {
                    padding: 10px;
                }
                .addBtn {
                    width: 80%;
                    margin: 10px auto;
                    display: block;
                }
                .el-card__body {
                    padding: 0;
                }
                .positionDiv {
                    border-top: 1px solid gainsboro;
                    .position_item {
                        width: 100%;
                        padding: 14px 0;
                        box-sizing: border-box;
                        cursor: pointer;
                        text-align: center;
                        border-bottom: 1px solid gainsboro;
                    }
                    .position_item:hover {
                        background: #f0f2f5;
                    }
                }
                .rowDiv {
                    padding: 10px;
                    box-sizing: border-box;
                }
                .limitDiv {
                    border: 1px solid gainsboro;
                    border-radius: 4px;
                    margin: 0 10px;
                    .limit-item {
                        display: flex;
                        box-sizing: border-box;
                        border-bottom: 1px solid gainsboro;
                        .item-left {
                            width: 20%;
                            display: flex;
                            padding: 10px;
                            align-items: center;
                            border-right: 1px solid gainsboro;
                        }
                        .item-right {
                            width: 80%;
                            padding: 10px;
                            .child-item {
                                display: flex;
                                flex-wrap: wrap;
                            }
                        }
                    }
                }
            }
            /deep/ .el-button--primary {
                color: #409EFF;
                background: transparent;
                border: none;
            }
            .remove {
                margin-left: auto;
                padding-right: 15px;
                color: #409EFF;
                cursor: pointer;
            }
            .add-unit {
                padding-right: 15px;
                color: #409EFF;
                cursor: pointer;
                margin-top: 8px;
            }
            .equal {
                margin-top: 8px;
            }
            .flex-div {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
            }
            .row_flex {
                width: 100%;
                align-items: center;
                padding: 5px 0;
            }
            .justify-content {
                width: 50%;
                justify-content: flex-start;
            }
            .flex-direction {
                flex-direction: column;
                justify-content: space-around;
                align-items: inherit;
            }
            .unit_style {
                width: 115px;
            }
            .mar-left {
                margin-left: 15px;
            }
            /deep/ .el-form {
                display: flex;
            }
        }
    }
</style>